<script setup>
import {ElMessage} from "element-plus";

document.title = '桃丽丝研究所 - 模型中心 - 首页'
import {
  ArrowLeftBold,
  ArrowRightBold,
  Box,
  Document,
  Key,
  SwitchButton,
  User,
  WindPower
} from "@element-plus/icons-vue";
import {ref} from "vue";
import Cookies from "js-cookie";
const isCollapse = ref(false)
const text = ref('收起菜单')
const unFoldAndFold = () => {
  isCollapse.value = !isCollapse.value
  if (isCollapse.value){
    text.value = '展开菜单'
  }else {
    text.value = '收起菜单'
  }
}
const logout = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('user')
  localStorage.removeItem('userId')
  localStorage.removeItem('userName')
  localStorage.removeItem('userRole')
  Cookies.remove('token')
  Cookies.remove('username')
  ElMessage.success('退出成功!!')
  window.location.href = '/login'
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="150px">
          <el-menu
              default-active="model"
              class="el-menu-vertical-demo"
              :collapse="isCollapse"
              router
          >
            <el-menu-item @click="unFoldAndFold">
              <el-icon v-if="isCollapse"><ArrowRightBold /></el-icon>
              <el-icon v-if="!isCollapse"><ArrowLeftBold /></el-icon>
              <template #title>{{text}}</template>
            </el-menu-item>
            <el-menu-item index="user">
              <el-icon><User /></el-icon>
              <template #title>用户管理</template>
            </el-menu-item>
            <el-menu-item index="model">
              <el-icon><Box /></el-icon>
              <template #title>模型管理</template>
            </el-menu-item>
            <el-menu-item index="code">
              <el-icon><Key /></el-icon>
              <template #title>授权管理</template>
            </el-menu-item>
            <el-menu-item index="log">
              <el-icon><Document /></el-icon>
              <template #title>日志管理</template>
            </el-menu-item>
            <el-menu-item @click="logout">
              <el-icon><SwitchButton /></el-icon>
              <template #title>退出登录</template>
            </el-menu-item>
          </el-menu>
      </el-aside>

      <el-container>
        <el-main>
            <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<style scoped>
.common-layout{
  display: flex;
  height: 100vh;

}
.el-menu-vertical-demo{
  height: 100vh;
}
.el-menu-item {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>